<template>
  <div class="register">
    <div class="form_container">
      <div class="form_container_head">米修在线后台管理系统</div>
      <div class="form_container_body">
        <div class="registerForm">
          <el-form
            ref="registerFormRef"
            :rules="registerFormRules"
            :model="registerForm"
            label-width="80px"
          >
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="registerForm.name"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="registerForm.email"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="registerForm.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
              <el-input
                v-model="registerForm.password2"
                placeholder="请确认密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择身份">
              <el-select
                placeholder="请选择身份"
                v-model="registerForm.identity"
              >
                <el-option label="管理员" value="manager"></el-option>
                <el-option label="员工" value="employee"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100%"
                size="large"
                @click="handleSubmit(registerFormRef)"
                >注册</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { registerType } from "../untils/type";
import axios from "../untils/http";
import router from "../router/index";
// import { ElMessage } from "element-plus";
// 提交规则
import type { FormInstance } from "element-plus";
const registerFormRef = ref<FormInstance>();
// 注册表单
const registerForm = reactive<registerType>({
  name: "admin",
  email: "222333@qq.com",
  password: "123321",
  password2: "123321",
  identity: "管理员",
});
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password again"));
  } else if (value !== registerForm.password) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};
// 校验规则
const registerFormRules = reactive({
  name: [
    {
      required: true,
      message: "用户名不能为空",
      triggger: "blur",
    },
    {
      min: 2,
      max: 30,
      message: "用户名请保持在2到30个字符之间",
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      type: "email",
      message: "邮箱号格式不正确",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
    {
      min: 6,
      max: 30,
      message: "密码请保持在6到30个字符之间",
      trigger: "blur",
    },
  ],
  password2: [
    {
      required: true,
      message: "确认密码不能为空",
      trigger: "blur",
    },
    {
      validator: validatePass2,
      message: "两次密码不一致",
      trigger: "blur",
    },
  ],
});
// 提交事件
const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      axios.post("/api/users/register", registerForm).then((res) => {
        console.log(res);
        if (res.status == 200) {
          ElMessage({
            message: "注册成功",
            type: "success",
          });
          router.push('/login')
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style scoped>
</style>